<script setup>
import {
    FiberManualRecordRound,
    StarBorderRound,
    MoreVertRound,
} from "@vicons/material";
import { ckeditor5, editorType, editorConfig } from "@/editor/config";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import noteServeRequest from "@/utils/request";
import { toHref } from "@/utils/to_path";
import noteApi from '@/utils/api/noteApi'

// 自定义的属性
const props = defineProps({
    // 正在编辑的笔记
    id: {
        required: true,
        type: Number
    },
    nid: Number, // 笔记列表中操作的笔记编号
    change: Number, // 笔记列表中操作的类型【0：不需要改变，1：重新加载，2：关闭】
});
// 自定义事件
const emits = defineEmits(['save'])

// 如果 change 值发生改变，判断改变的笔记是否和编辑的笔记相同，如果相同则重新获取编辑的笔记
watch(
    () => props.change,
    newData => {
        // 判断编辑的笔记是否 和 笔记列表中操作的笔记是同一个笔记
        if (Number.parseInt(props.id) === props.nid) {
            switch (newData) {
                case 1:
                    getEditNote(); // 重新获取编辑的笔记
                    break;
                case 2:
                    toHref('/note') // 关闭正在编辑的笔记
                    break;
            }
        }
    }
)

// 只要笔记的编号发生改变，那么重新获取编辑的笔记请求
watch(
    () => props.id,
    () => {
        getEditNote();
    }
);

//  正在编辑的笔记对象
const note = ref({});

let ckeditor = null; // 编辑器对象

// 编辑器初始化完毕
const onReady = (editor) => {
    ckeditor = editor; // 编辑器对象

    console.log(editor.ui.view.toolbar.itemsView);
    editor.ui.view.toolbar.itemsView.children._items[7].set({
        withText: true,
    });

    // 在编辑器区域插入工具栏
    editor.ui
        .getEditableElement()
        .parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
        );
};

/**
 * 获取编辑的笔记
 */
const getEditNote = async () => {
    // 请求 API
    let editNoteAPI = { ...noteApi.editNote };
    // 请求参数
    editNoteAPI.params = { noteId: props.id }
    // 发送请求
    noteServeRequest(editNoteAPI).then((response) => {
        if (!response) return;
        note.value = response.data; // 编辑笔记的信息
    })
};


// Ctrl + S 保存笔记的函数
const saveCtrls = (e) => {
    // Ctrl + S
    if (e.keyCode === 83 && e.ctrlKey) {
        e.preventDefault(); // 取消 Ctrl + S 默认行为
        save(); // 保存笔记
    }
}

// 页面渲染成功后的回调函数
onMounted(() => {
    window.addEventListener("keydown", saveCtrls);
});

// 页面离开之前，去除监听的事件（Ctrl + S）
onBeforeUnmount(() => {
    window.removeEventListener("keydown", saveCtrls)
})


/**
 * 保存笔记
 */
const save = async () => {
    let noteId = props.id; // 笔记编号
    let content = note.value.content; // 笔记完整内容
    let body = ckeditor.plugins.get("Title").getBody(); // 内容
    let title = ckeditor.plugins.get("Title").getTitle(); // 标题

    // 请求 API
    let saveNoteAPI = { ...noteApi.saveNote };
    // 请求参数
    saveNoteAPI.data = { noteId, title, body, content }
    // 发送请求
    noteServeRequest(saveNoteAPI).then((response) => {
        if (!response) return;
        note.value.updateTime = response.data; // // 编辑笔记的时间更新
        emits('save') // 通知父组件，更新了笔记
    })
};

getEditNote();
</script>

<template>
    <n-space vertical style="padding: 25px;" :size="20">
        <n-card :bordered="false">
            <n-space justify="space-between" align="center">
                <!-- 保存状态、发布时间 -->
                <n-space align="center" :wrap-item="false">
                    <n-icon color="#18a058" :component="FiberManualRecordRound" />
                    <n-text depth="3">保存并发布于：{{ note.updateTime }}</n-text>
                </n-space>

                <!-- 分享，收藏，更多操作 -->
                <n-space align="center" :wrap-item="false">
                    <!-- 分享 -->
                    <n-button dashed round>
                        分享
                    </n-button>
                    <!-- 收藏 -->
                    <n-button circle quaternary>
                        <n-icon :size="20" :component="StarBorderRound"></n-icon>
                    </n-button>
                    <!-- 更多操作 -->
                    <n-button circle quaternary>
                        <n-icon :size="20" :component="MoreVertRound"></n-icon>
                    </n-button>
                </n-space>
            </n-space>
        </n-card>

        <!-- 富文本编辑器 -->
        <n-card :bordered="false">
            <ckeditor5 v-model="note.content" :editor="editorType" :config="editorConfig" @ready="onReady" />
        </n-card>
    </n-space>
</template>

<style>
/* 去除编辑器默认的边框样式 */
.ck.ck-editor__editable_inline {
    border: none;
}

/* 去除聚焦编辑器时编辑器的边框和阴影样式 */
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
    border: none;
    box-shadow: none;
}

/* 去除 logo */
.ck.ck-balloon-panel.ck-powered-by-balloon.ck-balloon-panel_visible {
    display: none;
}
</style>